<template>
  <div class="dashboard-container">
    <!-- 头部内容 -->
    <!-- <tableMent :data="table"> </tableMent> -->
    <MyButton type="medium" color="red" text="提交" />
    <MyTable :column="column" :data="tableData">
      <template v-slot:operation="row">
        <el-button type="primary" size="default" @click="edit(row)">编辑</el-button>
      </template>
    </MyTable>
    <el-card class="header-card">
      <div>
        <div class="fl headL">
          <div class="headImg">
            <img :src="avatar" />
          </div>
          <div class="headInfoTip">
            <p class="firstChild">你好，{{ name }}，祝你开心每一天！</p>
            <p class="lastChild">
              {{ workNumber }} | {{ depart }} | {{ company }}
            </p>
          </div>
        </div>
        <div class="fr" />
      </div>
    </el-card>
    <!-- 主要内容 -->
    <el-row type="flex" justify="space-between" :gutter="20">
      <!-- 左侧内容 -->
      <el-col :span="13">
        <!-- 工作日历 -->
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>{{ $t("dashboard.title") }}</span>
          </div>
          <!-- 放置日历组件 -->
          <workCalen />
        </el-card>
        <!-- 公告 -->
        <el-card class="box-card">
          <div class="advContent">
            <div class="title">公告</div>
            <div class="contentItem">
              <ul class="noticeList">
                <li v-for="item in 6" :key="item">
                  <div class="item">
                    <img src="@/assets/common/img.jpeg" alt="" />
                    <div>
                      <p>
                        <span class="col">朱继柳</span> 发布了 第{{
                          item
                        }}期“传智大讲堂”互动讨论获奖名单公布
                      </p>
                      <p>2018-07-2{{ item }} 15:21:38</p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-card>
      </el-col>
      <!-- 右侧内容 -->
      <el-col :span="11">
        <el-card class="box-card">
          <div class="header headTit">
            <span>流程申请</span>
          </div>
          <div class="sideNav">
            <el-button class="sideBtn">加班离职</el-button>
            <el-button class="sideBtn">请假调休</el-button>
            <el-button class="sideBtn">审批列表</el-button>
            <el-button class="sideBtn">我的信息</el-button>
          </div>
        </el-card>

        <!-- 绩效指数 -->
        <el-card class="box-card">
          <div slot="header" class="header headTit">
            <span>绩效指数</span>
          </div>
          <!-- 放置雷达图 -->
          <myChart />
        </el-card>
        <!-- 帮助连接 -->
        <el-card class="box-card">
          <div class="header headTit">
            <span>帮助链接</span>
          </div>
          <div class="sideLink">
            <el-row>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconGuide" />
                  <p>入门指南</p>
                </a>
              </el-col>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconHelp" />
                  <p>在线帮助手册</p>
                </a>
              </el-col>
              <el-col :span="8">
                <a href="#">
                  <span class="icon iconTechnology" />
                  <p>联系技术支持</p>
                </a>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import tableMent from './components/tableMent'
import workCalen from './components/work-calendar.vue'
import myChart from './components/chart.vue'
export default {
  name: 'Dashboard',
  components: {
    workCalen,
    myChart
    // tableMent
  },
  data() {
    return {
      column: [
        { label: '姓埋名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        { label: '爱好', prop: 'hobby' },
        { label: '职业', prop: 'job' },
        { label: '性别', prop: 'sex', type: 'function', callback: (data) => this.map(data.sex) },
        { label: '工资', prop: 'salary' },
        { label: '编辑', type: 'slot', name: 'operation', width: 300 }
      ],
      tableData: [
        { name: '小红', age: 18, hobby: '化妆', job: '化妆师', sex: '1', salary: 80000 },
        { name: '小明', age: 18, hobby: '打篮球', job: '码字园', sex: '2', salary: 500 },
        { name: '小白', age: 18, hobby: '睡大觉', job: '无业游民', sex: '2', salary: 0 },
        { name: '小亮', age: 18, hobby: '打游戏', job: '游戏主播', sex: '2', salary: 10000 },
        { name: '小美', age: 18, hobby: '看电视', job: '小演员', sex: '1', salary: 30000 },
        { name: '小青', age: 18, hobby: '打法海', job: '搏击手', sex: '1', salary: 210000 }
      ]
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name', 'depart', 'company', 'workNumber'])
  },
  methods: {
    map(data) {
      const obj = {
        '1': '女',
        '2': '男'
      }
      return obj[data]
    },
    edit(data) {
      console.log(data)
    }
  }
  // data () {
  //   return {
  //     table: [{
  //       date: '2016-05-03',
  //       name: '王小虎',
  //       address: '上海市普陀区金沙江路 1518 弄'
  //     }, {
  //       date: '2016-05-02',
  //       name: '王小虎',
  //       address: '上海市普陀区金沙江路 1518 弄'
  //     }, {
  //       date: '2016-05-04',
  //       name: '王小虎',
  //       address: '上海市普陀区金沙江路 1518 弄'
  //     }, {
  //       date: '2016-05-01',
  //       name: '王小虎',
  //       address: '上海市普陀区金沙江路 1518 弄'
  //     }, {
  //       date: '2016-05-08',
  //       name: '王小虎',
  //       address: '上海市普陀区金沙江路 1518 弄'
  //     }, {
  //       date: '2016-05-06',
  //       name: '王小虎',
  //       address: '上海市普陀区金沙江路 1518 弄'
  //     }, {
  //       date: '2016-05-07',
  //       name: '王小虎',
  //       address: '上海市普陀区金沙江路 1518 弄'
  //     }]
  //   }
  // },
  // created () {
  //   window.addEventListener('beforeunload', function (event) {
  //     console.log('即将关闭')
  //     if (event.clientX <= 0 && event.clientY < 0) {
  //       console.log('离开》》》》》》》》》》》》》》》》》》》')
  //       alert('离开》》》》》》》》》》》》》》》》》》》')
  //     } else {
  //       console.log('刷新。。。。。。。。。。。。。。。。')
  //       alert('刷新或离开')
  //     }
  //     event.returnValue = '我在这写点东西...'
  //   })
  //   // window.onbeforeunload = (event) => {
  //   //   if (event.clientX <= 0 && event.clientY < 0) {
  //   //     console.log('离开》》》》》》》》》》》》》》》》》》》')
  //   //     alert('离开》》》》》》》》》》》》》》》》》》》')
  //   //   } else {
  //   //     console.log('刷新。。。。。。。。。。。。。。。。')
  //   //     alert('刷新或离开')
  //   //   }
  //   //   event.returnValue = '确认关闭'
  //   //   return '确认关闭'
  //   // }
  //   const obj = {
  //     _na_dd: 'jjjj',
  //     _na_cc: 'kkkk',
  //     ma_ee: {
  //       na_jj: {
  //         l_l: 'kkk',
  //         ltc_jj: {
  //           k_k: 'kkk'
  //         }
  //       }
  //     }
  //   }
  //   const traget = {}
  //   // function parmas (obj, target) {
  //   //   // const o = {}
  //   //   for (const key in obj) {
  //   //     let str = key.split('_').map((item, index) => {
  //   //       // console.log(item)
  //   //       if (index) return item.slice(0, 1).toUpperCase() + item.slice(1)
  //   //       return item
  //   //     }).join('')
  //   //     str = str.slice(0, 1).toLowerCase() + str.slice(1)

  //   //     if (typeof obj[key] === 'object') {
  //   //       target[str] = {}
  //   //       parmas(obj[key], target[str])
  //   //     } else {
  //   //       target[str] = obj[key]
  //   //     }
  //   //   }
  //   // }
  //   parmas(obj, traget)
  //   console.log(traget, 'target')
  //   // console.log(parmas(obj))
  //   // function fn () {
  //   //   // const key = Object.keys(obj)

  //   // }
  //   // fn()
  // },
  // activated () {
  //   console.log('actived')
  // },
  // destroyed () {
  //   console.log('我执行了destroyed')
  // },
  // beforeDestroy () {
  //   console.log('我执行了')
  // }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 20px;
  li {
    list-style: none;
  }
  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .headInfoTip {
    padding: 25px 0 0;
    margin-left: 120px;
    p {
      padding: 0 0 15px;
      margin: 0;
      &.firstChild {
        font-size: 20px;
      }
      &.lastChild {
        font-size: 16px;
        color: #7f8c8d;
      }
    }
  }
}

.box-card {
  padding: 5px 10px;
  margin-top: 20px;
  .header {
    span {
      color: #2c3e50;
      font-size: 20px;
    }
    .item {
      color: #97a8be;
      float: right;
      padding: 3px 0;
    }
  }
  .headTit {
    span {
      border-bottom: 4px solid #8a97f8;
      padding-bottom: 10px;
    }
  }
}
.header-card {
  position: relative;
  .header {
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
  }
}

.advContent {
  background: #fff;
  border-radius: 5px 5px 0px 0px;
  .title {
    font-size: 16px;
    padding: 20px;
    font-weight: bold;
    border-bottom: solid 1px #ccc;
  }
  .contentItem {
    padding: 0 30px;
    min-height: 350px;
    .item {
      display: flex;
      padding: 18px 0 10px;
      border-bottom: solid 1px #ccc;
      .col {
        color: #8a97f8;
      }
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 10px;
      }
      p {
        padding: 0 0 8px;
      }
    }
  }
}
.noticeList {
  margin: 0;
  padding: 0;
}
.sideNav,
.sideLink {
  padding: 30px 0 12px;
  .sideBtn {
    padding: 16px 20px;
    font-size: 16px;
    margin: 10px 5px;
  }
}
.sideLink {
  text-align: center;
  .icon {
    display: inline-block;
    width: 76px;
    height: 76px;
    background: url("./../../assets/common/icon.png") no-repeat;
  }
  .iconGuide {
    background-position: 0 0;
  }
  .iconHelp {
    background-position: -224px 0;
  }
  .iconTechnology {
    background-position: -460px 0;
  }
}
</style>
